<template>
	<div class="xtx-carousel" @mouseenter="stop()" @mouseleave="start()">
		<ul class="carousel-body">
			<li v-for="(item, i) in sliders" :class="{fade: index=== i}" class="carousel-item">
				<router-link v-if="item.hrefUrl" :to="item.hrefUrl">
					<img :src="item.imgUrl" alt="">
				</router-link>
				<div class="slider" v-else>
					<router-link :to="`/product/${goods.id}`" v-for="goods in item" :key="goods.id">
						<img :src="goods.picture" alt="">
						<p class="name ellipsis">{{goods.name}}</p>
						<p class="price">&yen;{{goods.price}}</p>
					</router-link>
				</div>
			</li>
		</ul>
		<a @click="toggle(-1)" href="javascript:;" class="carousel-btn prev"><i
				class="iconfont icon-angle-left"></i></a>
		<a @click="toggle(1)" href="javascript:;" class="carousel-btn next"><i
				class="iconfont icon-angle-right"></i></a>
		<div class="carousel-indicator">
			<span v-for="(item, i) in sliders" :key="i" :class="{active: index === i}"></span>
		</div>
	</div>
</template>

<script>
	import {
		ref,
		watch,
		onUnmounted
	} from 'vue'

	export default {
		name: 'XtxCarousel',

		props: {
			sliders: {
				type: Array,
				default: () => []
			},
			duration: {
				type: Number,
				default: 3000
			},
			autoPlay: {
				type: Boolean,
				default: false
			}
		},

		setup(props) {
			const index = ref(0)

			let timer = null
			const autoPlayFn = () => {
				clearInterval(timer)
				timer = setInterval(() => {
					index.value++
					if (index.value >= props.sliders.length) {
						index.value = 0
					}
				}, props.duration)
			}

			watch(() => props.sliders, newVal => {
				if (newVal.length && props.autoPlay) {
					index.value = 0
					autoPlayFn()
				}
			}, {
				immeidate: true
			})

			const stop = () => {
				if (timer) {
					clearInterval(timer)
				}
			}

			const start = () => {
				if (props.sliders.length && props.autoPlay) {
					autoPlayFn()
				}
			}

			const toggle = step => {
				const newIndex = index.value + step
				if (newIndex >= props.sliders.length) {
					index.value = 0
					return
				}
				if (newIndex < 0) {
					index.value = props.sliders.length - 1
					return
				}
				index.value = newIndex
			}

			onUnmounted(() => {
				clearInterval(timer)
			})

			return {
				index,
				stop,
				start,
				toggle
			}
		}
	}
</script>

<style lang="less" scoped>
	.xtx-carousel {
		width: 100%;
		height: 100%;
		min-width: 300px;
		min-height: 150px;
		position: relative;

		.carousel {
			&-body {
				width: 100%;
				height: 100%;
			}

			&-item {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				transition: opacity 0.5s linear;

				&.fade {
					opacity: 1;
					z-index: 1;
				}

				img {
					width: 100%;
					height: 100%;
				}
			}

			&-indicator {
				position: absolute;
				left: 0;
				bottom: 20px;
				z-index: 2;
				width: 100%;
				text-align: center;

				span {
					display: inline-block;
					width: 12px;
					height: 12px;
					background: rgba(0, 0, 0, .2);
					border-radius: 50%;
					cursor: pointer;

					~span {
						margin-left: 12px;
					}

					&.active {
						background: #fff;
					}
				}
			}

			&-btn {
				width: 44px;
				height: 44px;
				background: rgba(0, 0, 0, .2);
				color: #fff;
				border-radius: 50%;
				position: absolute;
				top: 228px;
				z-index: 2;
				text-align: center;
				line-height: 44px;
				opacity: 0;
				transition: all .5s;

				&.prev {
					left: 20px;
				}

				&.next {
					right: 20px;
				}
			}
		}

		&:hover {
			.carousel-btn {
				opacity: 1;
			}
		}
	}

	.slider {
		display: flex;
		justify-content: space-around;
		padding: 0 40px;

		>a {
			width: 240px;
			text-align: center;

			img {
				padding: 20px;
				width: 230px !important;
				height: 230px !important;
			}

			.name {
				font-size: 16px;
				color: #666;
				padding: 0 40px;
			}

			.price {
				font-size: 16px;
				color: @priceColor;
				margin-top: 15px;
			}
		}
	}
</style>
